// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
@use 'includes/lib' as *;

.c-features-main-header {
    text-align: center;

    .mzp-c-wordmark.mzp-t-product-vpn {
        background-image: url('/media/protocol/img/logos/mozilla/vpn/logo-word-hor.svg');
        background-position: top center;
        margin: 0 auto $spacing-xl;
    }
}

.c-feature-title {
    @include font-size($vpn-title-2xs-size);
    line-height: 1.2;

    @media #{$mq-md} {
        @include font-size($vpn-title-xs-size);
    }
}

.mzp-c-split-body {
    h2 {
        @include font-size($vpn-title-sm-size);
        line-height: 1.2;

        @media #{$mq-md} {
            @include font-size($vpn-title-md-size);
        }
    }

    p {
        @include text-body-lg;
    }
}

.c-feature-block {
    text-align: center;
    margin-bottom: $spacing-2xl;

    img {
        display: block;
        margin: 0 auto $spacing-lg;
    }

    @media #{$mq-sm} {
        display: grid;
        grid-column-gap: $layout-md;
        grid-template-columns: 100px 1fr;
        text-align: start;
    }

    @media #{$mq-md} {
        display: block;
    }

    @media #{$mq-lg} {
        display: grid;
    }
}

.c-trust,
.c-secure {
    background: $color-marketing-gray-20;
    padding-top: $layout-md;
    padding-bottom: $layout-md;

    li {
        margin-bottom: $spacing-xl;
    }

    @media #{$mq-md} {
        li {
            margin-bottom: 0;
        }
    }

    .mzp-c-picto img {
        display: block;
        margin: 0 auto $spacing-xl;
    }

    .mzp-c-picto-heading {
        @include font-size($vpn-title-2xs-size);
        line-height: 1.2;
    }
}

.c-convenient,
.c-tab-locations {
    padding-bottom: 0;
}
